<template>
  <a-form layout="inline" class="search-form">
    <a-form-item label="课程名称">
      <a-input v-model:value="listParam.teacherName" placeholder="请输入教师名称"></a-input>
    </a-form-item>
    <a-button style="margin-right:15px;" @click="searchBtn">
      <template #icon>
        <search-outlined />
      </template>
      搜索
    </a-button>
    <a-button type="primary" danger style="margin-right:15px;" @click="resetBtn">
      <template #icon>
        <close-outlined />
      </template>
      重置
    </a-button>
    <a-button @click="addBtn" type="primary" style="margin-right:15px;">
      <template #icon>
        <plus-outlined />
      </template>
      新增
    </a-button>
  </a-form>

  <!-- 表格列表 -->
  <a-table
      :dataSource="tableList.list"
      :columns="columns"
      :pagination="rolePage"
      :scroll="{ y: tableHeight }"
      bordered
  >
    <!-- 操作按钮 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'courseType'">
        <a-tag v-if="record.courseType === '0'" color="blue">春季</a-tag>
        <a-tag v-if="record.courseType === '1'" color="orange">秋季</a-tag>
      </template>
      <template v-if="column.key === 'action'">
        <a-button type="primary" @click.stop="editBtn(record)">
          <template #icon>
            <edit-outlined />
          </template>
          <span>编辑</span>
        </a-button>
        <a-button type="primary" danger style="margin-left: 10px" @click.stop="deleteBtn(record)">
          <template #icon>
            <close-outlined />
          </template>
          <span>删除</span>
        </a-button>
      </template>
    </template>
  </a-table>

  <add-teacher ref="addRef" @save="save"></add-teacher>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import AddTeacher from "@/views/teacher/component/addTeacher.vue";
import useTeacher from "@/composable/teacher/useTeacher";
import useTable from "@/composable/teacher/useTable";

//表格数据
const { columns, rolePage, getList, tableList, tableHeight, searchBtn, resetBtn, listParam } = useTable()
const { addBtn,editBtn,deleteBtn,addRef,save}  = useTeacher(getList)
</script>

<style scoped lang="scss">

</style>
